<template>
    <div class="addFormBox">
        <div class="formItem">
            <label v-t="'goods.address1'">Name</label>
            <my-input v-model="name" :placeholder="placeholder1"/>
        </div>
        <div class="formItem">
            <label v-t="'goods.address2'">Contact</label>
            <my-input v-model="phone" :placeholder="placeholder2"/>
        </div>
        <!-- <div class="formItem"  @click="openSelect">
            <label>Address</label>
            <my-input :disabled="true" v-model="sltxt" placeholder="Country And City"/>
        </div> -->
        <div class="formItem">
            <label v-t="'goods.address3'">Country</label>
            <my-input v-model="countryName" :placeholder="placeholder3"/>
        </div>
        <div class="formItem">
            <label v-t="'goods.address4'">City</label>
            <my-input v-model="cityName" :placeholder="placeholder4"/>
        </div>
        <div class="formItem">
            <label v-t="'goods.address5'">Address</label>
            <my-input v-model="address" :placeholder="placeholder5"/>
        </div>
        <div class="adsbbtn">
            <my-button :text='btn1' @click="doAdd"/>
        </div>
    </div>
    <address-select v-if="selectFlag" v-model="addressObj" @close="selectFlag=false" @finish='setVal'/>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myInput from '@/components/myInput.vue'
import myButton from '@/components/myButton.vue'
import addressSelect from '@/components/addressSelect.vue'
import { toast } from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       myInput,
       myButton,
       addressSelect
    },
    props:{

    },
    emits:{  // teleport后，出发事件需要emits申明（vue3+）
        'close':null
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            orderInfo:computed(()=>store.state.shop.orderInfo),
            address:'',
            name:'',
            phone:'',
            sltxt:'',
            selectFlag:false,
            addressObj:{},
            countryName:'',
            cityName:'',
            placeholder1:t('goods.placeholder1'),
            placeholder2:t('goods.placeholder2'),
            placeholder3:t('goods.placeholder3'),
            placeholder4:t('goods.placeholder4'),
            placeholder5:t('goods.placeholder5'),
            btn1:t('goods.btn1'),
        })

        onMounted(()=>{
            
        })

        const setVal = (obj)=>{
            state.sltxt = `${obj.cityName}.${obj.countryName}`
        }

        const openSelect  = ()=>{
            state.selectFlag=true
        }
        const doAdd = async ()=>{
            if(!state.name){
                return toast(t('goods.tip4'))
            }else if(!state.phone){
                return toast(t('goods.tip5'))
            }else if(!state.countryName){
               return toast(t('goods.tip6'))
            }else if(!state.cityName){
               return toast(t('goods.tip7'))
            }else if(!state.address){
                return toast(t('goods.tip8'))
            }
            const res = await store.dispatch('shop/add_address',{
                walletAddress:state.userInfo.walletAddress,
                //...state.addressObj,
                name:state.name,
                phone:state.phone,
                address:state.address,
                countryName:state.countryName,
                cityName:state.cityName
            })
            if(res.success){
                store.dispatch('shop/get_address_list',{
                    walletAddress:state.userInfo.walletAddress,
                })
                context.emit('close')
            }else{
                toast('Submission Failed')
            }
        }

        return{
            ...toRefs(state),
            openSelect,
            setVal,
            doAdd
        }
    }
}
</script>

<style lang="scss" scoped>
    .addFormBox{
        padding: 10px 20px 30px 0;
        .formItem{
            display: flex;
            align-items: center;
            font-size: 28px;
            font-family: Inter-Medium, Inter;
            margin: 30px 0 0 0;
            label{
                display: block;
                width: 200px;
                text-align: right;
                padding: 0 15px 0 0;
            }
        }
        .adsbbtn{
            width: 300px;
            margin: 40px auto 0 auto;
        }
    }
</style>
<style lang="scss">
    .myareaSelectCotaner{
        // background: url(/images/dgbg4.png) left top no-repeat;
        // background-size: 100% 100%;
        background: #023178;
       // border: 1px solid #81E9FF;
        .van-tabs__wrap{
            .van-tabs__nav{
                background: none;
                
            }
            .van-cascader__tab{
                color: #67F8FF;
                font-weight: 600;
            }
            .van-cascader__tab--unselected{
                color: rgba(255,255,255,0.6);
            }
            
        }
        .van-cascader__option{
                &:active,&:hover{
                    background: none;
                }
            }
    }
    .van-popup{
        &.myaddresspop{
            background: none;
        }
    }
</style>